<!--<div class="hero-unit" align="center">
  <h2>Bienvenido a ScrumEgg </h2>
  <p><img src="http://www.gettyicons.com/free-icons/135/eggs/png/128/fried_egg_128.png" class="img-circle"></p>
 
</div>-->
<style>
    #trash, #items2, .item2 {
            height: 50px;
            width: 50px;
    }

    #trash {
            color: #354e62;
    }

    #items2 {
        margin-top: 10px;
        width: 100%;
    }

    .item2 {
            cursor:move;
            background: #cdcdcd;
            color: #3b3b3b;
            float: left;
            margin-right: 10px;
    }

    .over2 {
        background-color: #cedae3;
    }

    .out2 {
        background-color: #a6bcce;
    }
</style>




    <style type="text/css">
     
      #container2 {
        width : 600px;
        height: 384px;
        margin: 8px auto;
      }
    </style>
  
    <div id="container2"></div>
    <!--[if IE]>
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/cake/css/flotr2/flotr2.min.js"></script>
    <script type="text/javascript">
      (function () {

        var
          container = document.getElementById('container2'),
          start = (new Date).getTime(),
          data, graph, offset, i;

        // Draw a sine curve at time t
        function animate (t) {

          data = [];
          offset = 2 * Math.PI * (t - start) / 10000;

          // Sample the sine function
          for (i = 0; i < 4 * Math.PI; i += 0.2) {
            data.push([i, Math.sin(i - offset)]);
          }

          // Draw Graph
          graph = Flotr.draw(container, [ data ], {
            yaxis : {
              max : 2,
              min : -2
            }
          });

          // Animate
          setTimeout(function () {
            animate((new Date).getTime());
          }, 50);
        }

        animate(start);
      })();
    </script>
    <div class="row-fluid borBox">
		<h6>Simple Bubble Chart</h6>
		<div class="render" id="bubbleChart" style="position: relative; ">

		<canvas class="flotr-canvas" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 400px; " width="600" height="400"></canvas><canvas class="flotr-overlay" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 400px; " width="600" height="400"></canvas><div style="position: absolute; top: -10000px; "><div style="font-size:smaller;" class="flotr-grid-label flotr-dummy-div">10.0</div></div><div style="position: absolute; top: -10000px; "><div style="font-size:smaller;" class="flotr-grid-label flotr-dummy-div">10.0</div></div><div style="font-size: smaller; color: rgb(84, 84, 84); " class="flotr-labels"><div style="position:absolute; text-align:center;  top:381px;  left:56.88888888888887px;  width:191.33333333333334px;    " class="flotr-grid-label first flotr-grid-label-x">0.0</div><div style="position:absolute; text-align:center;  top:381px;  left:216.33333333333331px;  width:191.33333333333334px;    " class="flotr-grid-label flotr-grid-label-x">5.0</div><div style="position:absolute; text-align:center;  top:381px;  left:375.77777777777777px;  width:191.33333333333334px;    " class="flotr-grid-label last flotr-grid-label-x">10.0</div><div style="position:absolute; text-align:right;  top:285.22222222222223px;  left:0px;  width:22px;    " class="flotr-grid-label first flotr-grid-label-y">0.0</div><div style="position:absolute; text-align:right;  top:180.5px;  left:0px;  width:22px;    " class="flotr-grid-label flotr-grid-label-y">5.0</div><div style="position:absolute; text-align:right;  top:75.77777777777783px;  left:0px;  width:22px;    " class="flotr-grid-label last flotr-grid-label-y">10.0</div></div><div class="flotr-titles"><div class="flotr-axis-title" style="font-weight:bold;"></div></div></div>
	</div>






<div id="move" style="width: 150px; height: 150px; background-color: rgb(255, 192, 203); border: 1px solid rgb(153, 153, 153); position: relative; left: 9px; top: -18px; " class="ui-draggable">
    &nbsp; </div>
	
<script type="text/javascript">
				if (typeof(charts) == 'undefined') {
					var charts = [];
				}
				charts['chart-5055c31cb92a6'] = {
					lines: [[["1.0.0",25],["1.1.0",53],["1.2.0",152],["1.3.0",78],["1.4.0",107]]],
					options: {
				title: '',
				series: [{color:'#4D4D4D'}]
			},
					isShy: false,
					isRendered: false
				};
			</script>

<div id="trash" class="out2">
        <span>Trash</span>
        </div>
        <div id="items2">
                <div class="item2"><span>Item 1</span></div>
                <div class="item2"><span>Item 2</span></div>
                <div class="item2"><span>Item 3</span></div>
</div>

<div id="chart-5055c31cb92a6" style="height: 200px; width: 300px; position: relative; " class="chart-container jqplot-target"><canvas width="170" height="100" style="position: absolute; left: 0px; top: 0px; " class="jqplot-base-canvas"></canvas>
    <div class="jqplot-title" style="height: 0px; width: 0px; "></div>
    <div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 170px; height: 18px; left: 0px; bottom: 0px; ">
        <div class="jqplot-xaxis-tick" style="position: absolute; left: 30px; ">1.0.0</div>
        <div class="jqplot-xaxis-tick" style="position: absolute; left: 70px; ">1.1.0</div>
        <div class="jqplot-xaxis-tick" style="position: absolute; left: 100px; ">1.2.0</div>
        <div class="jqplot-xaxis-tick" style="position: absolute; left: 130px; ">1.3.0</div>
        <div class="jqplot-xaxis-tick" style="position: absolute; left: 160px; ">1.4.0</div>
    </div>
    <div class="jqplot-axis jqplot-yaxis" style="height: 200px; width: 20px; left: 0px; top: 0px; position: absolute; ">
        <div class="jqplot-yaxis-tick" style="position: absolute; top: 120px; ">0</div>
        <div class="jqplot-yaxis-tick" style="position: absolute; top: 90px; ">42</div>
        <div class="jqplot-yaxis-tick" style="position: absolute; top: 60px; ">84</div>
        <div class="jqplot-yaxis-tick" style="position: absolute; top: 30px; ">125</div>
        <div class="jqplot-yaxis-tick" style="position: absolute; top: 1px; ">167</div>
        
    </div>
    <canvas width="300" height="200"  class="flotr-canvas" style="position: absolute; left: 0px; top: 0px; "></canvas>
    <canvas width="180" height="160" id="myCanvas" style="position: absolute; left: 22px; top: 10px; " class="jqplot-series-shadowCanvas"></canvas>
    <canvas width="180" height="160" id="myCanvas2"style="position: absolute; left: 22px; top: 10px; " class="jqplot-series-canvas"></canvas>
    <canvas width="180" height="160" style="position: absolute; left: 22px; top: 10px; " class="jqplot-highlight-canvas"></canvas>
    <div class="jqplot-highlighter-tooltip" style="position: absolute; left: 53.4px; top: 19.346889952153113px; display: none; ">53</div>
    <div class="jqplot-cursor-tooltip" style="position: absolute; display: none; "></div>
    <canvas width="180" height="160" style="position: absolute; left: 22px; top: 10px; " class="jqplot-lineRenderer-highlight-canvas"></canvas><canvas width="138" height="62" style="position: absolute; left: 22px; top: 10px; " class="jqplot-event-canvas"></canvas>
</div>


<!--<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>-->

<script>
var c=document.getElementById("myCanvas");
var ctx2=c.getContext("2d");

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(50,50);
ctx.moveTo(50,50);
ctx.lineTo(150,100);
ctx.lineWidth=3;
ctx.strokeStyle="red";
ctx.shadowBlur=2;
ctx.shadowColor="black";
ctx.stroke();

</script>
